@extends('backend.layouts.app')

@section('content')

<div class="col-lg-12">
    <div class="card">
        <div class="card-header">
            <h3 class="mb-0 h6">{{translate('Manual Payment Information')}}</h3>
        </div>

        <form action="{{ route('manual_payment_methods.update', $manual_payment_method->id) }}" method="POST">
          <input name="_method" type="hidden" value="PATCH">
          @csrf
            <div class="card-body">
                <div class="form-group row">
                    <label class="col-sm-2 col-from-label" for="type">{{translate('Type')}}</label>
                    <div class="col-sm-10">
                        <select class="form-control aiz-selectpicker" name="type" id="type" required>
                            <option value="custom_payment" @if($manual_payment_method->type == 'custom_payment') selected @endif>{{translate('Custom Payment')}}</option>
                            <option value="bank_payment" @if($manual_payment_method->type == 'bank_payment') selected @endif>{{translate('Bank Payment')}}</option>
                            <option value="check_payment" @if($manual_payment_method->type == 'check_payment') selected @endif>{{translate('Check Payment')}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-from-label" for="name">{{translate('Heading')}}</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="heading" value="{{ $manual_payment_method->heading }}" placeholder="" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 col-form-label" for="signinSrEmail">{{translate('Checkout Thumbnail')}} (438x235)px</label>
                    <div class="col-md-8">
                        <div class="input-group" data-toggle="aizuploader" data-type="image" data-multiple="false">
                            <div class="input-group-prepend">
                                <div class="input-group-text bg-soft-secondary font-weight-medium">{{ translate('Browse')}}</div>
                            </div>
                            <div class="form-control file-amount">{{ translate('Choose File') }}</div>
                            <input type="hidden" name="photo" value="{{ $manual_payment_method->photo }}" class="selected-files">
                        </div>
                        <div class="file-preview box sm">
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-from-label">{{translate('Payment Instruction')}}</label>
                    <div class="col-sm-10">
                        <link
                            href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"
                            rel="stylesheet"
                        />
                        <style>
                            #editor—wrapper {
                                border: 1px solid #ccc;
                                z-index: 100; /* 按需定义 */
                            }
                            #toolbar-container {
                                border-bottom: 1px solid #ccc;
                            }
                            #editor-container {
                                height: 500px;
                            }
                            .w-e-bar-item-group .w-e-menu-tooltip-video {
                                display: none !important;
                            }
                        </style>
                        <div id="editor—wrapper">
                            <div id="toolbar-container"><!-- 工具栏 --></div>
                            <div id="editor-container"><!-- 编辑器 --></div>
                        </div>
                        <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
                        <script>
                            const { createEditor, createToolbar } = window.wangEditor

                            // 编辑器配置
                            const editorConfig = {
                                placeholder: '请输入内容...',
                                onChange(editor) {
                                    const html = editor.getHtml()
                                    document.getElementById('description').value = editor.getHtml()
                                    console.log('editor content', html)
                                },
                                MENU_CONF: {
                                    uploadImage: {
                                        // 上传图片的服务器地址
                                        server: 'https://shop.sncbiohealth.com/aiz-uploader/upload',

                                        // 上传图片的字段名
                                        fieldName: 'aiz_file',

                                        // 最大上传图片大小 (5MB)
                                        maxFileSize: 5 * 1024 * 1024, // 5M

                                        // 上传图片的自定义头部
                                        headers: {
                                            'Authorization': 'Bearer your-token-here'
                                        },

                                        // 上传时的额外参数
                                        meta: {
                                            name: '',
                                            type: 'image/png',

                                        },

                                        // 自定义上传文件名
                                        metaWithUrl: false,

                                        // 图片上传超时时间 (10秒)
                                        timeout: 10 * 1000, // 10 秒

                                        // 自定义上传文件名
                                        onBeforeUpload(file) {
                                            console.log('即将上传文件:', file)
                                            return file // 可以返回修改后的文件对象
                                        },

                                        // 上传成功回调
                                        onSuccess(file, res) {
                                            console.log('上传成功', res)
                                        },

                                        // 上传失败回调
                                        onFailed(file, res) {
                                            console.error('上传失败', res)
                                            alert('上传失败: ' + (res.message || '未知错误'))
                                        },

                                        // 上传错误回调
                                        onError(file, err, res) {
                                            console.error('上传出错', err, res)
                                            alert('上传出错: ' + (err.message || '未知错误'))
                                        },

                                        // 自定义插入图片
                                        customInsert(res, insertFn) {
                                            // console.log(res)
                                            // res 是服务器返回的结果
                                            // insertFn 是插入图片的函数
                                            insertFn('https://shop.sncbiohealth.com/public/'+res.file_name, '', 'https://www.sncbiohealth.com/public/'+res.file_name)
                                        }
                                    }
                                }
                            }

                            // 创建编辑器
                            const editor = createEditor({
                                selector: '#editor-container',
                                html: htmlDecode('{{ $manual_payment_method->description }}'),
                                config: editorConfig,
                                mode: 'default', // or 'simple'
                            })

                            const toolbarConfig = {
                                toolbarKeys: [
                                    'bold',
                                    'underline',
                                    'italic',
                                    'through',
                                    'color',
                                    'bgColor',
                                    'fontSize',
                                    'fontFamily',
                                    'indent',
                                    'delIndent',
                                    'justifyLeft',
                                    'justifyRight',
                                    'justifyCenter',
                                    'justifyJustify',
                                    'lineHeight',
                                    // 'insertImage',  // 图片上传
                                    'uploadImage',
                                    'insertVideo',
                                    'insertLink',
                                    'codeBlock',
                                    'blockquote',
                                    'divider',
                                    'emotion',
                                    'undo',
                                    'redo'
                                ],
                            }

                            const toolbar = createToolbar({
                                editor,
                                selector: '#toolbar-container',

                                config: toolbarConfig,
                                // excludeKeys: ['uploadVideo', 'insertVideo'],
                                mode: 'default', // or 'simple'
                            })
                            function htmlDecode(input) {
                                const doc = new DOMParser().parseFromString(input, "text/html");
                                return doc.documentElement.textContent;
                            }
                        </script>
                        <input type="hidden" id="description" name="description">
{{--                        <textarea class="aiz-text-editor" name="description">@php echo $manual_payment_method->description @endphp</textarea>--}}
                    </div>
                </div>
                <div id="bank_payment_data">
                    <div id="bank_payment_informations">
                        @if($manual_payment_method->bank_info != null)
                            @foreach (json_decode($manual_payment_method->bank_info) as $key => $bank_info)
                                <div class="form-group row">
                                    <div class="row">
                                        <label class="col-sm-2 col-from-label">{{translate('Bank Information')}}</label>
                                        <div class="col-sm-8">
                                            <div class="row">
                                                <div class="col-sm-3"><input type="text" name="bank_name[]" class="form-control" placeholder="{{ translate('Bank Name') }}" value="{{ $bank_info->bank_name }}"></div>
                                                <div class="col-sm-3"><input type="text" name="account_name[]" class="form-control" placeholder="{{ translate('Account Name') }}" value="{{ $bank_info->account_name }}"></div>
                                                <div class="col-sm-3"><input type="text" name="account_number[]" class="form-control" placeholder="{{ translate('Account Number') }}" value="{{ $bank_info->account_number }}"></div>
                                                <div class="col-sm-3"><input type="text" name="routing_number[]" class="form-control" placeholder="{{ translate('Routing Number') }}" value="{{ $bank_info->routing_number }}"></div>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            @if ($key == 0)
                                                <button type="button" class="btn btn-primary" onclick="addBankInfoRow()">{{ translate('Add More') }}</button>
                                            @else
                                                <div class="col-sm-1">
                                                    <button type="button" class="btn btn-danger" onclick="removeBankInfoRow(this)">{{ translate('Remove') }}</button>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
            <div class="form-group mb-3 text-right">
                <button type="submit" class="btn btn-primary">{{translate('Save')}}</button>
            </div>
        </form>
        <!--===================================================-->
        <!--End Horizontal Form-->

        <div class="d-none" id="bank_info_row">
            <div class="form-group row">
                <div class="row">
                    <label class="col-sm-2 col-from-label">{{translate('Bank Information')}}</label>
                    <div class="col-sm-8">
                        <div class="row">
                            <div class="col-sm-3"><input type="text" name="bank_name[]" class="form-control" placeholder="{{ translate('Bank Name') }}"></div>
                            <div class="col-sm-3"><input type="text" name="account_name[]" class="form-control" placeholder="{{ translate('Account Name') }}"></div>
                            <div class="col-sm-3"><input type="text" name="account_number[]" class="form-control" placeholder="{{ translate('Account Number') }}"></div>
                            <div class="col-sm-3"><input type="text" name="routing_number[]" class="form-control" placeholder="{{ translate('Routing Number') }}"></div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-danger" onclick="removeBankInfoRow(this)">{{translate('Remove')}}</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@section('script')
    <script type="text/javascript">

        $(document).ready(function(){

            $('#type').on('change', function(){
                if($('#type').val() == 'bank_payment'){
                    $('#bank_payment_data').show();
                }
                else {
                    $('#bank_payment_data').hide();
                }
            });
        });

        function addBankInfoRow(){
            $('#bank_payment_informations').append($('#bank_info_row').html());
        }

        function removeBankInfoRow(el){
            $(el).closest('.form-group').remove();
        }

    </script>
@endsection
